<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">党组织概况</div>
      </div>
    </div>
    <div class="flex-container-box">
      <div class="flex-container-item1">
        <div class="flex-item">
          <!-- 数字 -->
          <span class="number">{{ num1 }}</span>
          <!-- 文字 -->
          <span class="text">{{ text1 }}党支部数量</span>
        </div>
      </div>

      <div class="flex-container-item2">
        <div class="flex-item">
          <!-- 数字 -->
          <span class="number">{{ num2 }}</span>
          <!-- 文字 -->
          <span class="text">{{ text2 }}党员数量</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">党员概况</div>
      </div>
    </div>
    <div class="flex-container-cht">
      <div class="container-cht">
        <div class="h2">党员男女比例</div>
        <div
          class="h3"
          @mouseover="changeColor(1)"
          @mouseout="restoreColor(1)"
          @click="showPatynumber"
          :style="{ cursor: cursorStyle1, color: textColor1 }"
        >
          党员详情 >
        </div>
        <el-dialog
          v-model="dialogVisible"
          :style="{
            '--el-dialog-padding-primary': '0rem',
            'background-image': 'url(src/assets/党员背景.png)',
            'background-size': '100% 100%',
            'background-repeat': ' no-repeat',
            'background-color': 'rgba(0, 0, 0, 0)',
            width: '75rem',
            height: '50rem',
            'text-align': 'center',
            padding: '0.5rem 0 0 0.8rem',
          }"
        >
          <template #header="{ titleId, titleClass }">
            <div class="my-header">
              <h4 :id="titleId" :class="titleClass" style="color: #ffffff"></h4>
            </div>
          </template>
          <div class="backg">
            <div class="patyimg"><span>党员详情列表</span></div>
            <div class="backg-a">
              <div class="search-bar">
                <label>姓名</label>
                <input type="text" v-model="searchText" @input="search" />
                <!-- <button class="search-b"></button> -->
                <!-- <button class="search-c" @click="reset"></button> -->
              </div>
              <table class="table">
                <thead>
                  <tr style="background-color: #f05e4b30">
                    <th>党员姓名</th>
                    <th>学历</th>
                    <th>籍贯</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所属党组织</th>
                    <th>入党时间</th>
                    <th>党龄</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(item, index) in displayedData"
                    :key="index"
                    :class="index % 2 === 0 ? 'even' : 'odd'"
                  >
                    <td>{{ item.name }}</td>
                    <td>{{ item.education }}</td>
                    <td>{{ item.nativePlace }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.organizationId }}</td>
                    <td>{{ item.partyTime }}</td>
                    <td><a @click="showDetail(index)">查看详情</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="padd">
              <div class="total-count">共{{ totalCount }}条</div>
              <div class="pagination">
                <span
                  v-if="currentPage > 1"
                  @click="changePage(currentPage - 1)"
                  >上一页</span
                >
                <!-- 显示第一页 -->
                <span v-if="currentPage > 5" @click="changePage(1)">1</span>
                <!-- 显示省略号 -->
                <span v-if="currentPage > 5">...</span>
                <!-- 根据当前页显示中间的页数 -->
                <span
                  v-for="page in displayedPages"
                  :key="page"
                  :class="{ active: currentPage === page }"
                  @click="changePage(page)"
                  >{{ page }}</span
                >
                <!-- 显示省略号 -->
                <span v-if="currentPage + 4 < totalPages">...</span>
                <!-- 显示最后一页 -->
                <span
                  v-if="currentPage + 4 < totalPages"
                  @click="changePage(totalPages)"
                  >{{ totalPages }}</span
                >
                <span
                  v-if="currentPage < totalPages"
                  @click="changePage(currentPage + 1)"
                  >下一页</span
                >
              </div>
            </div>
            <!-- 显示详细信息的部分 -->
            <!-- <div v-if="selectedItem"> -->
            <div class="overlay" v-if="showOverlay" @click="hiddetails"></div>
            <div class="details" v-if="showDetails">
              <!-- 详情组件内容 -->
            </div>
            <!-- </div> -->
          </div>

          <!-- 其他详细信息内容 -->
        </el-dialog>
      </div>
      <div class="cht1">
        <v-chart id="chart1" class="chart1" :option="option1" />
        <div class="cht1-boxitem">
          <div class="flex-cht1-container">
            <div class="flex-cht1-item">
              <!-- 图片 -->
              <img
                src="../assets/女.png"
                style="width: 1.25rem; height: 2.75rem"
                alt="image"
                class="cht1-image"
              />
            </div>
            <div class="flex-cht1-item">
              <div class="flex-cht1-text">
                <!-- 数字 -->
                <div class="cht1-number">{{ rate1 }}</div>
                <div class="cht1-number">%</div>
                <!-- 文字 -->
              </div>
              <span class="cht1-text2">{{ text1 }}女性党员</span>
            </div>
          </div>
          <div class="flex-cht1-container">
            <div class="flex-cht1-item">
              <!-- 图片 -->
              <img
                src="../assets/男.png"
                style="width: 1.25rem; height: 2.75rem"
                alt="image"
                class="cht1-image"
              />
            </div>
            <div class="flex-cht1-item">
              <div class="flex-cht1-text">
                <!-- 数字 -->
                <div class="cht1-number">{{ rate2 }}</div>
                <div class="cht1-number">%</div>
                <!-- 文字 -->
              </div>
              <span class="cht1-text2">{{ text1 }}男性党员</span>
            </div>
          </div>
        </div>
      </div>
      <div class="container-cht">
        <div class="h2">党员学历构成</div>
      </div>
      <div class="cht2">
        <v-chart id="chart2" class="chart2" :option="option2" />
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">党员年龄分布</div>
      </div>
    </div>
    <div class="flex-container-cht">
      <v-chart id="chart3" class="chart3" :option="option3" />
    </div>
  </div>
</template>

<script >
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";
import {
  getprofile,
  getpartymember,
  getorganizeparty,
  getpartyorginaze,
} from "../reqeust/index";
export default {
  data() {
    return {
      data: [],
      partydata: [],
      showOverlay: false,
      showDetails: false,
      selectedItem: null,
      currentPage: 1,
      pageSize: 6,
      searchText: "",
      dialogVisible: false,
      option1: {}, // 存储echarts图表的配置项
      option2: {},
      option3: {},
      rate1: "",
      rate2: "",
      cursorStyle1: "default",
      textColor1: "white",
      num1: 0,
      num2: 0,
    };
  },
  emits: ["sendData"],
  setup() {},
  computed: {
    displayedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      console.log("00", this.filteredData.slice(start, end));
      return this.filteredData.slice(start, end).map((item) => ({
        name: item.name,
        education: item.education,
        nativePlace: item.nativePlace,
        organizationId: this.getNameById(item.partygroupid),
        partyTime: item.jointimestamp,
        // photo: item.photo,
        birdth: item.birdth,
        sex: item.sex,
      }));
    },
    filteredData() {
      if (this.searchText) {
        return this.data.filter((item) => item.name.includes(this.searchText));
      }
      return this.data;
    },
    totalCount() {
      return this.filteredData.length;
    },
    totalPages() {
      return Math.ceil(this.totalCount / this.pageSize);
    },
    displayedPages() {
      if (this.totalPages <= 10) {
        // 当总页数小于等于10时，显示全部页数
        return Array.from({ length: this.totalPages }, (_, i) => i + 1);
      } else if (this.currentPage <= 5) {
        // 当当前页数小于等于5时，显示前7页和最后一页
        return [1, 2, 3, 4, 5, 6, 7];
      } else if (this.currentPage >= this.totalPages - 4) {
        // 当当前页数大于等于总页数-4时，显示第一页和后7页
        return [
          this.totalPages - 6,
          this.totalPages - 5,
          this.totalPages - 4,
          this.totalPages - 3,
          this.totalPages - 2,
          this.totalPages - 1,
          this.totalPages,
        ];
      } else {
        // 其他情况下，显示当前页的前3页、当前页、当前页的后3页
        return [
          this.currentPage - 2,
          this.currentPage - 1,
          this.currentPage,
          this.currentPage + 1,
        ];
      }
    },
  },
  async mounted() {
    this.getDataFromAPI(); // 调用接口获取数据
    const promise = await getpartymember();
    const partyorganization = await getpartyorginaze();
    console.log("222", promise, partyorganization);
    this.num1 = promise.total;
    this.num2 = partyorganization.total;
    this.data = promise.list;
    this.partydata = partyorganization.list;
  },
  methods: {
    //党员详情处理
    showPatynumber() {
      this.dialogVisible = true;
    },
    getNameById(id) {
      const foundItem = this.partydata.find((item) => item.id === id);
      return foundItem ? foundItem.title : "";
    },
    changePage(page) {
      this.currentPage = page;
    },
    search() {
      this.currentPage = 1;
    },
    showDetail(index) {
      // 在点击详情时更新selectedItem属性
      this.showOverlay = true;
      this.showDetails = true;
      this.selectedItem = this.displayedData[index];
    },
    hiddetails() {
      this.showOverlay = false;
      this.showDetails = false;
    },
    off() {
      this.showOverlay = false;
      this.showDetails = false;
    },
    reset() {
      this.searchText = "";
    },
    //
    sendDataToParent1() {
      this.$emit("sendData", "党员详情"); // 触发自定义事件并传递数据
    },
    changeColor(number) {
      if (number === 1) {
        this.textColor1 = "aqua";
        this.cursorStyle1 = "pointer";
      }
    },
    restoreColor(number) {
      if (number === 1) {
        this.textColor1 = "aliceblue"; // 还原为原来的颜色
      }
    },
    async getDataFromAPI() {
      try {
        const res = await getpartymember();
        const myChart1 = echarts.init(
          document.getElementById("chart1"),
          "dark"
        );
        //获取图表数据result1
        const result1 = res.list.reduce((acc, current) => {
          const targetType1 = current.sex;
          const existingType1 = acc.find((item) => item.name === targetType1);
          if (existingType1) {
            existingType1.value++;
          } else {
            acc.push({ value: 1, name: targetType1, label: { show: true } });
          }
          return acc;
        }, []);
        this.rate1 = ((result1[1].value / res.total) * 100).toFixed(2);
        this.rate2 = ((result1[0].value / res.total) * 100).toFixed(2);
        console.log("80", result1, result1[1].value, this.rate1);
        // 获取图表数据result2
        const result2 = res.list.reduce((acc, current) => {
          const targetType2 = current.education.trim();
          const existingType2 = acc.find((item) => item.name === targetType2);
          if (existingType2) {
            existingType2.value++;
          } else {
            acc.push({ value: 1, name: targetType2 });
          }
          return acc;
        }, []);
        console.log(result2);
        //获取图表数据result3
        const dataAxis = [
          "25及以下",
          "26-35",
          "36-45",
          "46-54",
          "55-59",
          "60及以上",
        ];
        // const idCard = res.list.map((item) => item.idcode);
        // const pattern = /^(.{6})(.{8})(.*)$/;
        // const matchResult = idCard[0].match(pattern);
        // 提取出生时间和省份
        // const birthDate = matchResult[2];
        // const provinceCode = matchResult[1].substr(0, 2);
        // 输出出生时间和省份
        // console.log("出生时间：", birthDate);
        // console.log("省份代码：", provinceCode);
        // console.log(data1);
        const getIdCardInfo = (idCard) => {
          const regionCode = idCard.substring(0, 6);
          const birthdayString = idCard.substring(6, 14);
          const birthday = new Date(
            parseInt(birthdayString.substring(0, 4)),
            parseInt(birthdayString.substring(4, 6)) - 1,
            parseInt(birthdayString.substring(6, 8))
          );
          const region = getRegionNameByCode(regionCode);
          const age = calculateAge(birthday);
          return { birthday, region, age };
        };
        const getRegionNameByCode = (code) => {
          // 根据地区编码获取地区名称的逻辑
        };
        const calculateAge = (birthday) => {
          const today = new Date();
          let age = today.getFullYear() - birthday.getFullYear();
          const monthDiff = today.getMonth() - birthday.getMonth();
          if (
            monthDiff < 0 ||
            (monthDiff === 0 && today.getDate() < birthday.getDate())
          ) {
            age--;
          }
          return age;
        };
        const idCard = res.list.map((item) => item.idcode);
        const idCardInfos = [];
        for (var i = 0; i < idCard.length; i++) {
          const idCardInfo = getIdCardInfo(idCard[i]);
          idCardInfos.push(idCardInfo.age);
        }
        console.log("出生时间：", idCardInfos);
        const existingType = [0, 0, 0, 0, 0, 0];
        for (var i = 0; i < idCardInfos.length; i++) {
          if (idCardInfos[i] <= 25) {
            existingType[0]++;
          } else if ((25 < idCardInfos[i]) & (idCardInfos[i] <= 35)) {
            existingType[1]++;
          } else if ((36 <= idCardInfos[i]) & (idCardInfos[i] <= 45)) {
            existingType[2]++;
          } else if ((46 <= idCardInfos[i]) & (idCardInfos[i] <= 54)) {
            existingType[3]++;
          } else if ((55 <= idCardInfos[i]) & (idCardInfos[i] <= 59)) {
            existingType[4]++;
          } else {
            existingType[5]++;
          }
        }
        let data = existingType;
        let yMax = 100;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
          dataShadow.push(yMax);
        }
        //图表
        this.option1 = {
          backgroundColor: "transparent",
          color: ["rgb(0, 200, 255)", "rgb(255, 77, 0)"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
              fontSize: 10, // 设置图例文字大小
            },
          },
          legend: {
            left: "center",
            top: "bottom",
            data: ["rose1", "rose2"],
          },
          series: [
            {
              name: "男女占比",
              type: "pie",
              radius: [45, 55],
              center: ["50%", "50%"],
              roseType: "radius",
              itemStyle: {
                borderRadius: 5,
              },
              label: {
                show: false,
                color: "#ffffff",
                position: "center",
                formatter: " {d}% \n {b} ",
                fontSize: 16,
              },
              emphasis: {
                label: {
                  color: "#ffffff",
                  show: true,
                  formatter: function (params) {
                    var percent = (
                      (params.value / (result1[1].value + result1[0].value)) *
                      100
                    ).toFixed(2);
                    return percent + "%" + "\n" + params.name;
                  },
                  fontSize: 16,
                },
              },
              data: result1,
            },
          ],
        };
        this.option2 = {
          backgroundColor: "transparent",
          // color: [
          //   "rgba(255, 80, 34, 0.551)",
          //   "rgba(255, 10, 0, 0.651)",
          //   "rgba(255, 100, 0, 0.551)",
          //   "rgba(255, 50, 0, 0.551)",
          //   "rgba(255, 10, 0, 0.551)",
          //   "rgba(255, 120, 0, 0.568)",
          //   "rgba(255, 30, 0, 0.551)",
          //   "rgba(255, 150, 0, 0.551)",
          //   "rgba(255, 20, 0, 0.551)",
          //   "rgba(255, 0, 0, 0.551)",
          // ],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
            textStyle: {
              fontSize: 10, // 设置图例文字大小
            },
          },
          legend: {
            // itemGap: 50,
            top: "15%",
            right: "1%",
            orient: "vertical",
            textStyle: {
              color: "#ffffff",
              fontSize: 12, // 设置图例文字大小
            },
            formatter: function (name) {
              var data = result2;
              for (var i = 0; i < data.length; i++) {
                if (data[i].name === name) {
                  break;
                }
              }
              return name + "：" + data[i].value;
            },
          },
          series: [
            {
              name: "学历分布",
              type: "pie",
              radius: [20, 85],
              center: ["25%", "50%"],
              roseType: "radius",
              itemStyle: {
                borderRadius: 3,
              },
              label: {
                color: "#ffffff",
                show: false,
                fontSize: 60,
                formatter: function (params) {
                  return params.name + "\n" + "(" + params.value + ")";
                },
              },
              data: result2,
            },
          ],
        };
        this.option3 = {
          backgroundColor: "transparent",
          title: {},
          grid: {
            top: "15%",
            bottom: "10%",
          },
          xAxis: {
            name: "（岁）",
            nameGap: 5,
            nameTextStyle: {
              fontSize: 10,
              color: "#fff",
            },
            data: dataAxis,
            axisLabel: {
              color: "#fff",
              fontSize: 9,
              margin: 10,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
              },
            },
            z: 10,
          },
          yAxis: {
            name: "     （人）",
            nameTextStyle: {
              fontSize: 10,
              color: "#ffffff",
            },
            axisLabel: {
              fontSize: 10,
              color: "#ffffff",
            },
            splitLine: {
              show: false, // 不显示网格线
            },
          },
          dataZoom: [
            {
              type: "inside",
            },
          ],
          series: [
            {
              label: {
                show: true,
                position: "top",
                fontSize: 10,
                color: "#ffffff",
              },
              type: "bar",
              barWidth: 20,
              itemStyle: {
                color: function (params) {
                  // 设置白色渐变和红色渐变的间隔
                  if (params.dataIndex % 2 === 0) {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#ffffff" },
                      { offset: 0.5, color: "#ffffff96" },
                      { offset: 1, color: "#ffffff00" },
                    ]);
                  } else {
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#ff0000" },
                      { offset: 0.5, color: "#ff000096" },
                      { offset: 1, color: "#ff000000" },
                    ]);
                  }
                },
              },
              data: data,
            },
          ],
        };
        this.renderChart(); // 渲染图表
        myChart1.on("mouseover", this.handleMouseOver);
      } catch (error) {
        // 错误处理
        console.error(error);
      }
    },
    renderChart() {
      const myChart1 = echarts.init(document.getElementById("chart1"), "dark"); // 初始化echarts图表
      const myChart2 = echarts.init(document.getElementById("chart2"), "dark"); // 初始化echarts图表
      const myChart3 = echarts.init(document.getElementById("chart3"), "dark"); // 初始化echarts图表
      myChart1.setOption(this.option1); // 设置图表的配置项
      myChart2.setOption(this.option2); // 设置图表的配置项
      myChart3.setOption(this.option3); // 设置图表的配置项
    },
    handleMouseOver(params) {
      const myChart1 = echarts.init(document.getElementById("chart1"), "dark"); // 初始化echarts图表
      // 获取鼠标在饼图上的option配置
      let option1 = myChart1.getOption();
      if (params.name === "男") {
        console.log("1");
        let newOptions = option1; // 获取当前图表的配置项
        console.log(newOptions);
        newOptions.series[0].data[0].label.show = false;
        newOptions.series[0].data[1].label.show = true; // 将女性占比的label设置为false
        myChart1.setOption(newOptions); // 更新图表配置
      }
      if (params.name === "女") {
        console.log("1");
        let newOptions = option1; // 获取当前图表的配置项
        newOptions.series[0].data[1].label.show = false;
        newOptions.series[0].data[0].label.show = true; // 将女性占比的label设置为false
        myChart1.setOption(newOptions); // 更新图表配置
      }
      console.log(myChart1.getOption());
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
/*  */
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
.container-cht {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  align-items: center;
}
.h2 {
  font-size: 1.25rem;

  font-weight: 600;
  color: #ffffff;
  text-shadow: 0px 0px 4px #ff0000;
  margin-right: 10rem;
}
.h3 {
  font-size: 1rem;

  font-weight: 400;
  color: #ffffff;
  border: 0.1rem solid rgba(255, 255, 255, 0.805);
  border-radius: 0.2rem;
}
/*  */
.full-secondtitle {
  display: flex;
  align-items: center;
  width: 11.5rem;
  height: 2.19rem;
  background-image: url("../assets/党组织标题背景.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0.2rem 1rem;
}
/*  */
.h1 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  margin-left: 1rem;
}
/*  */
.flex-container-cht {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
.flex-container-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.flex-container-item1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
  margin-right: 2rem;
}
.flex-container-item2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
  padding: 0.3rem 1rem;
}
/*  */
.flex-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* margin: auto; */
  flex-grow: 1;
  flex-basis: 33.33%;
}
/*  */
.number {
  font-size: 2.2rem;
  font-size: 33px;

  font-weight: 600;
  color: #ffb568;
}
/*  */
.text {
  font-size: 1.125rem;

  font-weight: 400;
  color: #ffffff;
}
.cht1-boxitem {
  display: flex;
  flex-direction: row;
}
.flex-cht1-container {
  display: flex;
  flex-direction: row;
  margin-right: 1rem;
  flex-grow: 1;
}
.flex-cht1-item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.flex-cht1-text {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.cht1-text2 {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.cht1-number {
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}
.cht1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cht2 {
}
.cht3 {
}
.chart1 {
  height: 9rem;
  width: 9rem;
  margin-right: 1.2rem;
}
.chart2 {
  width: 24rem;
  height: 11rem;
}

.chart3 {
  width: 24rem;
  height: 11rem;
}
/* dangyuan */
.backg {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  width: 70rem;
  height: 46rem;
  /* background-image: url("../assets/partybackground.png"); */
  background-size: 100% 100%;
  font-size: 1rem;
  position: relative;
}
.patyimg {
  display: flex;
  align-items: center;
  background-image: url("../assets/党员标志.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 21.75rem;
  height: 4.43rem;
  font-size: 2.1rem;
  font-weight: 600;
  text-align: center;
  color: #ffffff;
}
.patyimg span {
  margin-left: 1rem;
}
.backg-a {
  flex: 1;
  /* 查询添加用此css */
  margin: 0px 0rem 0 1rem;
}
.search-bar {
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1rem;
}
.search-bar input {
  /* background-color: transparent; */
  font: initial;
  font-size: 20px;
  margin-left: 20px;
  width: 120px;
  height: 30px;
  /* background-image: url("../assets/input.png"); */
  background-size: 100% 100%;
  background: rgba(31, 172, 235, 0.1);
  border: 1px solid #1faceb;
  border-radius: 4px;
}
.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.even {
  background-color: #f05e4b00;
}
.odd {
  background-color: #f05e4b10;
}
.table thead th {
  /* background-color: #f0f0f0; */
  padding: 1.5rem;
  /* padding-bottom: 50px; */
  color: #ff624e;
  /* border: 1px solid #ddd; */
}
.table tbody td {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1.5rem;
  text-align: center;
  color: rgb(255, 255, 255);
  /* border: 1px solid #ddd; */
}
.table tbody td a {
  color: #29abe2; /* 设置字体颜色为蓝色 */
  text-decoration: underline; /* 添加下划线 */
  cursor: pointer; /* 当鼠标悬停在详情列上时，显示手型光标 */
}
.padd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.pagination {
  order: 2;
  margin-right: 3rem;
  margin-top: 0.5rem;
}
.pagination span {
  margin-left: 0.5rem;
  font-size: 1rem;
  border: 1px solid rgb(191, 191, 191);
  border-radius: 15%;
  color: rgb(255, 255, 255);
  cursor: pointer;
  padding: 4px 10px 4px 10px;
}
.pagination span.active {
  /* border: 1px solid transparent; */
  border: 1px solid #ff624e;
  border-radius: 15%;
  /* border-image: repeating-linear-gradient(
      -45deg,
      red,
      red 2px,
      white 2px,
      white 4px
    )
    1; */
  font-weight: bold;
}
.total-count {
  margin-left: 2rem;
  color: rgb(255, 255, 255);
  margin-top: 0.5rem;
  font-size: 1rem;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* details样式 */
.details {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  z-index: 1000;
}
</style>